<template>
  <div class="global-tabbar__module">
    <template v-for="(temp,index) in value || 3">
      <div :class="['i-tapbar',size,{on:active===index}]" :key="index" @click="onClick(index)" v-text="temp" />
    </template>
  </div>
</template>

<script>
export default {
    props: {
        size: {
            type: String,
            default: '',
        },
        value: Array,
    },
    data() {
        return {
            active: 0,
        };
    },
    methods: {
        onClick(index) {
            this.active = index;
            this.$emit('change', index);
        },
    },
};
</script>


<style lang="less">
.global-tabbar__module {
  overflow: hidden;
  zoom: 1;
  user-select: none;
  font-size: 16px;
  .i-tapbar {
    width: 70px;
    height: 20px;
    line-height: 20px;
    margin: 0 6px;
    padding: 2px 4px 7px;
    position: relative;
    border-bottom: 1px solid transparent;
    text-align: center;
    box-sizing: initial;
    float: left;
    transition: border, color, 0.2s;
    white-space: nowrap;
    cursor: pointer;
    &::before {
      content: "";
      display: none;
      width: 0;
      height: 0;
      margin-left: -3px;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-width: 3px;
      border-style: solid;
      border-color: transparent transparent @tab_border_show transparent;
    }
  }
  .mini {
    padding: 1px 0 2px;
    font-size: 12px;
  }
  .on {
    border-color: @base_color;
    color: @base_color;
    &::before {
      display: block;
    }
  }
}
</style>
